<template>
    <el-dialog
        v-model="serviceAddOrUpdateDialogVisible"
        title="添加微服务"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="serviceForm" :rules="serviceRules" ref="serviceFormRef">
                <el-form-item label="微服务名称" label-width="20%" prop="applicationName">
                    <el-input v-model="serviceForm.applicationName" placeholder="微服务名称" clearable />
                </el-form-item>
                <el-form-item label="微服务GIT路径" label-width="20%" prop="gitPath">
                    <el-input v-model="serviceForm.gitPath" placeholder="微服务GIT路径" clearable />
                </el-form-item>
                <el-form-item label="微服务POM路径" label-width="20%" prop="pomPath">
                    <el-input v-model="serviceForm.pomPath" placeholder="微服务POM路径" clearable />
                </el-form-item>
                <el-form-item label="微服务JAR包路径" label-width="20%" prop="jarPath">
                    <el-input v-model="serviceForm.jarPath" placeholder="微服务JAR包路径" clearable />
                </el-form-item>
                <el-form-item label="微服务JAR包名称" label-width="20%" prop="jarName">
                    <el-input v-model="serviceForm.jarName" placeholder="微服务JAR包名称" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(serviceFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="ServiceAddOrUpdateDialog" setup lang="ts">
import {addApplication, applicationInfoQuery, updateApplication} from "@/request/service";
import {ElNotification, FormInstance} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useServiceRegisterStore} from "@/stores/serviceManage/serviceRegister";

let props = defineProps(['serviceForm']);

let serviceForm = computed(() => {return props['serviceForm']});

let serviceRules = ref({
    applicationName: [{ required: true, message: '微服务名称不能为空', trigger: 'blur' }],
    gitPath: [{ required: true, message: '微服务GIT路径不能为空', trigger: 'blur' }],
    pomPath: [{ required: true, message: '微服务POM路径不能为空', trigger: 'blur' }],
    jarPath: [{ required: true, message: '微服务JAR包路径不能为空', trigger: 'blur' }],
    jarName: [{ required: true, message: '微服务JAR包名称不能为空', trigger: 'blur' }]
});
let saveLoading = ref(false);

let serviceAddOrUpdateDialogVisible = computed(() => {return useServiceRegisterStore().addOrUpdateDialog});

function cancelDialog() {
    useServiceRegisterStore().resetAddOrUpdateDialog(false);
}

let serviceFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            // 根据ID判断是否是添加还是修改
            if (serviceForm.value.id === '') {
                // 添加
                addApplication(serviceForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        applicationInfoQuery({}).then(res => {
                            useServiceRegisterStore().resetServiceApplicationDataList(res.data);
                        })
                        useServiceRegisterStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 修改
                updateApplication(serviceForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        applicationInfoQuery({}).then(res => {
                            useServiceRegisterStore().resetServiceApplicationDataList(res.data);
                        })
                        useServiceRegisterStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    });
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>